<template>
  <div>
    <div
      style="
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        overflow-x: hidden;
      "
      ref="resList"
      :style="{ maxWidth: containerWith }"
    >
      <div
        style="margin-right: -4%"
        :class="[
          importRes === true ? 'res-detail-import' : 'res-details-active',
        ]"
      >
        <div
          class="res-details"
          :class="[
            importRes === true ? 'res-detail-import' : 'res-details-active',
          ]"
          :style="[importRes ? importStyle : noImprotStyle]"
          ref="details"
          id="myDetails"
        >
          <div
            v-loading="loading"
            class="res-detail-item"
            :class="onSelectActiveClass(item.selected)"
            v-for="(item, index) in dbResources"
            :key="index"
          >
            <div
              class="res-detail-item-container"
              @click="onJumpToDetail(item)"
            >
              <img
                :src="showPhoto(item)"
                @load="handleLoad"
                @dragstart="imgdragstart"
              />
              <div class="res-detail-item-name" :title="showTitle(item)">
                {{ showCultureResName(item) }}
              </div>
              <div class="res-detail-item-author">
                By:{{ showAuthor(item) }}
              </div>
            </div>
            <div class="res-detail-item-type-div">
              <img
                :src="onShowRightIcom(item.type)"
                @dragstart="imgdragstart"
              />
              <span
                style="font-size: 14px"
                v-if="item.remainUseTimes && item.remainUseTimes !== -1"
                >剩余次数: {{ item.remainUseTimes }}次</span
              >
              <span style="font-size: 14px" v-if="item.remainUseTimes == -1"
                >免费资源</span
              >
              <span v-if="belong !== 3 || belong !== 1"
                >￥{{ item.price }}</span
              >
            </div>
          </div>
          <div v-if="!hasRes" class="no-res-show" ref="noResult">
            <img
              src="../../assets/images/pix_noresults.png"
              @dragstart="imgdragstart"
            />
            <span>{{ $t("command.noResult") }}</span>
          </div>
          <el-pagination
            v-if="total > 12"
            :page-size="12"
            :pager-count="11"
            layout="prev, pager, next,jumper"
            :total="total"
            @current-change="changeResInfo"
            :currentPage="page"
            style="width: 100%; margin-top: 20px; text-align: center"
          >
          </el-pagination>
        </div>
      </div>
      <Selected v-if="importRes" />
      <el-dialog
        class="dialog"
        center
        title="提 示"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <p style="text-align: center">你还未拥有该资源，是否前往购买？</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cencal">取 消</el-button>
          <el-button type="primary" @click="goBuy">前往购买</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Selected from "./SelectedResList";
import util from "../../common/util";
import api from "../../common/api";
import ajax from "../../common/ajax";
import encryption from "../../common/encryption";

let detailUrl;
let culture;
let userId;
let importRes;

export default {
  name: "ResList",
  components: { Selected },
  props: {
    orderType: {
      default: "",
    },
    thirdSub: {
      default: "-1",
    },
    belong: {
      default: 1,
    },
    importRes: {
      default: false,
    },
    userId: {
      default: 0,
    },
    pid: {
      default: 1,
    },
    language: {
      default: "zh-cn",
    },
    sub: {
      default: "-1",
    },
    support: {
      default: "-1",
    },
    resourceName: {
      default: "",
    },
    hasRes: {
      default: false,
      type: Boolean,
    },
    page: {
      default: 1,
      type: Number,
    },
    total: {
      default: 0,
      type: Number,
    },
    onChangePage: Function,
    onParentJumpToResShop: Function,
  },
  data() {
    return {
      lang: "",
      loading: true,
      // showQaTips: false,
      pageSize: 12,
      dialogVisible: false,
      noImprotStyle: {
        width: "100%",
      },
      importStyle: {
        flex: 1,
      },
      containerWith: "95%",
      // 价格信息
      contentStyleObj: {
        height: "",
        width: "",
      },
    };
  },
  computed: {
    // 选择资源的列表展示数据
    dbResources() {
      return this.$store.state.resources.dbResources;
    },
  },
  updated() {
    console.log(this.page);
  },
  created() {
    userId = this.$route.query.userId;
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    if (this.$route.query.importRes == "true") {
      this.importRes = true;
      if (this.belong != undefined) {
        rebuy(this);
      }
    }
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
  },
  methods: {
    cencal() {
      this.dialogVisible = false;
      this.$message.error("添加失败");
    },
    imgdragstart(e) {
      e.preventDefault();
    },
    handleLoad(e) {
      if (this.$route.query.import === true) {
        if (document.getElementById("myDetails").scrollHeight < 1000) {
          document.getElementById("mySelected").style.height = "1000px";
        } else {
          document.getElementById("mySelected").style.height =
            document.getElementById("myDetails").scrollHeight + "px";
        }
      }
    },
    getHeight() {
      // 获取浏览器高度，减去顶部导航栏的值，70该值也可以动态获取
      this.contentStyleObj.height = window.innerHeight + "px";
      this.contentStyleObj.width = window.innerWidth + "px";
    },
    showTitle(item) {
      return item.resourceName;
    },
    showAuthor(item) {
      if (item.belong === 1 || item.belong === 2) {
        return "平台资源";
      } else {
        return "MXR资源";
      }
    },
    showPhoto(item) {
      return item.resourceIcon;
    },

    /**
     * 显示选择中的样式
     */
    onSelectActiveClass(hasSelected) {
      return hasSelected ? "res-detail-item-active" : "";
    },
    /**
     * 跳转到详情页面
     *
     * 如果是导入资源的界面，传值给编辑器
     *
     * @param item 资源内容
     */
    onJumpToDetail(item) {
      let that = this;
      this.item = item;
      if (!this.importRes) {
        this.$router.push({
          path: "/detail",
          query: {
            resourceName: item.resourceName,
            resourceNo: item.resourceNo,
            belong: item.belong,
            userId: this.userId,
            isPurchase: item.isPurchase,
            resourceType: item.resourceType,
          },
        });
        // }
      } else {
        if (!item.remainUseTimes) {
          let i = this.responserebuy.list.findIndex(
            (v) => v.resourceNo == item.resourceNo
          );
          if (i !== -1 || item.price == 0) {
            item.selected = !item.selected;
            if (item.selected) {
              that.$store.commit("resources/addSelectedRes", item);
            } else {
              that.$store.commit("resources/incrementSelectedRes", item);
            }
          } else if (i == -1) {
            that.dialogVisible = true;
          }
          return;
        } else {
          item.selected = !item.selected;
          if (item.selected) {
            this.$store.commit("resources/addSelectedRes", item);
          } else {
            this.$store.commit("resources/incrementSelectedRes", item);
          }
        }
      }
    },

    /**
     * 跳转到资源商店，给编辑器网页地址
     */
    goBuy() {
      let that = this;
      this.dialogVisible = false;
      this.$router.push({
        path: "/detail",
        query: {
          resourceName: that.item.resourceName,
          resourceNo: that.item.resourceNo,
          belong: that.item.belong,
          userId: this.userId,
          resourceType: that.item.resourceType,
        },
      });
    },

    /**
     * 显示资源类型ICON
     *
     * @param type 资源类型
     */
    onShowRightIcom(type) {
      if (this.belong === 4) {
        return require("../../assets/images/btn_select_3D_OFF.png");
      } else {
        return util.returnResListTypeIcon(type);
      }
    },

    /**
     * 分页事件
     *
     * @param e 页面下标
     */
    changeResInfo(e) {
      this.loading=true
      this.onChangePage(e);
    },
    /**
     * 根据环境显示资源名称
     */
    showCultureResName(item) {
      return item.resourceName;
    },
  },
};

function rebuy(that) {
  ajax.get({
    url: api.resource.privateRouteName + api.resource.children.usr,
    data: {
      userId: userId,
      pageSize: 999999,
    },
    success(res) {
      that.responserebuy = JSON.parse(encryption.decryptionMxr(res));
    },
  });
}
</script>

<style scoped>
.res-details {
  display: flex;
  flex-wrap: wrap;
}

.res-details-active {
  padding-bottom: 25px;
  width: 110%;
}

.res-detail-import {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 83%;
  margin-right: 2%;
}

.res-detail-item {
  width: 228px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  margin-top: 15px;
  overflow: auto;
  cursor: pointer;
  margin-right: 4.15%;
  height: 305px;
}

.res-detail-item-container {
  display: inline-block;
}

.res-detail-item-active {
  border: 1px solid #4381e6;
}

.res-detail-item-container > img {
  width: 210px;
  height: 195px;
  display: block;
  margin: 9px 9px 0 9px;
  border-radius: 4px;
}

.res-detail-item-name {
  width: 210px;
  font-size: 18px;
  color: #393d49;
  margin: 15.4px auto 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.res-detail-item-author {
  width: 210px;
  font-size: 14px;
  color: #a4a4a4;
  margin: 0 auto 0;
  display: flex;
  justify-content: space-between;
}

.res-detail-item-type-div {
  width: 100%;
  border-top: 1px solid #cccccc;
  margin-top: 10px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.res-detail-item-type-div img {
  width: 23px;
  height: 20px;
  margin-left: 8px;
}

.res-detail-item-type-div span {
  font-size: 17px;
  color: #4381e6;
  margin-right: 5px;
}

.no-res-show {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  margin-top: 100px;
}

.no-res-show img {
  width: 120px;
  height: 120px;
}

.no-res-show span {
  margin-top: 10px;
}

.need-editor-icon {
  width: 0;
  height: 0;
  border-width: 40px;
  border-style: solid;
  border-color: red transparent transparent transparent;
  transform: rotate(225deg);
  position: absolute;
  margin-left: 161px;
  margin-top: -40px;
}

.qr-bg {
  width: 209px;
  height: 193px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  position: relative;
  margin-top: -194px;
  margin-left: 10px;
  display: none;
  align-items: center;
}

.qr-code {
  width: 150px;
  margin: 0 auto;
  display: block;
}

.unable-prev {
  width: 150px;
  background: #ffffff;
  height: 150px;
  margin: 0 auto;
  line-height: 150px;
  text-align: center;
  border-radius: 10px;
}

.res-span-active {
  display: block;
  position: absolute;
  transform: rotate(90deg);
  margin-top: -46px;
  margin-left: -7px;
  font-size: 12px;
  color: #ffffff;
}

.res-span {
  display: block;
  position: absolute;
  transform: rotate(180deg);
  margin-top: -35px;
  margin-left: -23px;
  font-size: 12px;
  color: #ffffff;
}

.res-span-custom {
  display: block;
  position: absolute;
  transform: rotate(90deg);
  margin-top: -40px;
  margin-left: -7px;
  font-size: 12px;
  color: #ffffff;
}

.description1,
.description2 {
  font-size: 12px;
  position: absolute;
  background: #fc9407;
  margin-top: -20px;
  margin-left: 157px;
  color: white;
  width: 62px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-top-left-radius: 5px;
}

.description2 {
  background: #43e695;
  width: 86px;
  height: 20px;
  margin-left: 134px;
}
</style>
<style>
.dialog .el-dialog__header {
  background-color: #4381e6 !important;
}
.dialog .el-dialog__header > span,
.dialog .el-dialog__header > button .el-icon-close {
  color: white;
  font-size: 18px;
}
</style>
